
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
    NavigatorIOS,
} from 'react-native';
var  Find = require('../Component/ZHFFind');
var  Mine = require('../Component/ZHFMine');
var  Message = require('../Component/ZHFMessage');
var  Home = require('../Component/ZHFHome');
var  Main = React.createClass({

    getInitialState(){
        return{
            selectedItem: 'home',
        }
    },
    render() {
        return (
           <TabBarIOS
           tintColor='orange'
           >
               {/*首页*/}
               <TabBarIOS.Item
              icon = {require('../image/tabbar_home.png')}
                   title= '首页'
                   selected={this.state.selectedItem == 'home'}
                   onPress={()=>{this.setState({selectedItem:'home'})}}

               >
                   <NavigatorIOS
                       style={{flex : 1}}
                       initialRoute = {
                       {
                           tintColor: 'orange',
                           component: Home, // 具体的板块
                           title:'首页',
                           leftButtonIcon:require('../image/tabbar_plus.png'),
                           rightButtonIcon:require('../image/tabbar_more.png'),
                       }

                   }/>

               </TabBarIOS.Item>
               {/*发现*/}
               <TabBarIOS.Item
                   icon = {require('../image/tabbar_seach.png')}
                   title= '发现'
                   selected={this.state.selectedItem == 'find'}
                   onPress={()=>{this.setState({selectedItem:'find'})}}
               >
                   <NavigatorIOS  style={{flex : 1}}
                                  initialRoute = {
                       {
                           component: Find, // 具体的板块
                           title:'发现'
                       }

                   }/>

               </TabBarIOS.Item>
               {/*消息*/}
               <TabBarIOS.Item
                   icon = {require('../image/tabbar_message.png')}
                   title= '消息'
                   selected={this.state.selectedItem == 'message'}
                   onPress={()=>{this.setState({selectedItem:'message'})}}
               >
                   <NavigatorIOS  style={{flex : 1}}
                                  initialRoute = {
                       {
                           component: Message, // 具体的板块
                           title:'消息'
                       }

                   }/>

               </TabBarIOS.Item>
               {/*我的*/}
               <TabBarIOS.Item
                    icon = {require('../image/tabbar_person.png')}
                   title= '我的'
                   selected={this.state.selectedItem == 'mine'}
                   onPress={()=>{this.setState({selectedItem:'mine'})}}
               >
                   <NavigatorIOS
                       style={{flex : 1}}
                       initialRoute = {
                       {
                           component: Mine, // 具体的板块
                           title:'我的'
                       }

                   }/>
               </TabBarIOS.Item>
           </TabBarIOS>
        );
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

module.exports = Main;
